/**
 * 步骤 封装
 * 
 * 版本：v1.0
 * 
 * Stanley
 **/
layui.define(['jquery'],
    function (exports) {
        var $ = layui.jquery;
        var kaStepTabs = new function () {
            this.init = function (params) {
                // 头部
                var headersHtml = this.getHeadersHtml(params.id, params.headers);
                var headerMainHtml = `<div class="layui-btn-container stepTabsHeader" id="` + params.id + `Header">` + headersHtml + `</div>`;
                // 内容
                var bodyHtml = this.getBodyHtml(params.id, params.bodys);
                var bodyMainHtml = `<div class="layui-panel layui-padding-3 tabBtnsLayuiPanel" id="` + params.id + `Body">` + bodyHtml + `</div>`;
                // 头部 + 内容
                $("#" + params.id).html(headerMainHtml + bodyMainHtml);
                // 给任意元素绑定 Tab 功能
                layui.tabs.render({ elem: '#' + params.id, header: ['#' + params.id + 'Header', '>.tabBtns'], body: ['#' + params.id + 'Body', '>.tabBtnsItem'] });
                $('#' + params.id + 'Header').off();
                //开始记录方式方式
                if (top.kaStepTabsData == undefined || top.kaStepTabsData == null || top.kaStepTabsData == "") {
                    top.kaStepTabsData = {};
                }
                top.kaStepTabsData[params.id] = params.bodys;
                // 切换
                layui.tabs.on('afterChange(' + params.id + ')', function (data) {
                    // 获取ID
                    var optionsId = data.options.id;
                    layui.kaStepTabs.loadSuccess(optionsId, data.index, data.length);
                    // --------------------
                    var length = data.length;
                    var tabBtnsItemCode = $("#" + optionsId + "_body_" + data.index).attr("tabBtnsItemCode");
                    // 渲染Html
                    if (tabBtnsItemCode != undefined && tabBtnsItemCode != null && tabBtnsItemCode != "") {
                        // 清除 Tabs 渲染的Html
                        for (var j = 0; j < length; j++) { $("#" + optionsId + "_body_" + j).html(""); }
                        // 开始配置第一个Tab
                        var stepTabsBodyList = [{}]
                        var stepTabsBodyHtmlData = {
                            id: optionsId + "_body_" + data.index,
                            list: stepTabsBodyList // 账号登录配置数据
                        }
                        layui.kahtml.getTemplateHtml("stepTabs" + (optionsId.charAt(0).toUpperCase() + optionsId.slice(1)) + (tabBtnsItemCode.charAt(0).toUpperCase() + tabBtnsItemCode.slice(1)), stepTabsBodyHtmlData);
                        layui.form.render();
                    }
                    // 处理步骤
                    var body = top.kaStepTabsData[optionsId][data.index];
                    var callBack = body["callBack"];
                    typeof callBack == "function" && callBack()
                });
                layui.tabs.change(params.id, 0);
            }
            //组装headers
            this.getHeaders = function (titles) {
                var headers = [];
                for (var i in titles) {
                    var header = {};
                    header[title] = titles[i]
                    headers.push(header);
                }
            }
            // 头部Html 
            this.getHeadersHtml = function (paramsid, headers) {
                var headersHtml = ``;
                var width = 100 / (headers.length);
                for (var i in headers) {
                    headersHtml = headersHtml + `
                        <div class="tabBtns" id="` + paramsid + `_header_` + i + `" style="width: ` + width + `%;">
                            <fieldset class="layui-elem-field layui-field-title tabBtnsField">
                                <legend class="tabBtnsLegend">
                                    <div class="tabBtnsLegendNumber">` + (parseInt(i) + 1) + `</div>
                                    <div class="tabBtnsLegendMsg">` + headers[i].title + `</div>
                                </legend>
                            </fieldset>
                        </div>
                    `;
                }
                return headersHtml;
            }
            // 内容Html
            this.getBodyHtml = function (paramsid, bodys) {
                var bodyHtml = ``;
                for (var i in bodys) {
                    var bhtml = (bodys[i].code != undefined && bodys[i].code != null && bodys[i].code != "") ? "" : bodys[i].html;
                    var tabBtnsItemCode = "";
                    if (bodys[i].code != undefined && bodys[i].code != null && bodys[i].code != "") {
                        tabBtnsItemCode = `" tabBtnsItemCode="` + bodys[i].code + `"`;
                    }
                    bodyHtml = bodyHtml + `<div id="` + paramsid + `_body_` + i + `" ` + tabBtnsItemCode + ` class="tabBtnsItem">` + bhtml + `</div>`;
                }
                return bodyHtml;
            }
            this.loadSuccess = function (paramsid, index, length) {
                for (var i = 0; i < length; i++) { $("#" + paramsid + "_header_" + i).removeClass("layui-success"); }
                if (index > 0) { for (var i = 0; i < index; i++) { $("#" + paramsid + "_header_" + i).addClass("layui-success"); } }
            }
        };
        exports('kaStepTabs', kaStepTabs);
    }
)